<template>
	<view class="mord">

		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="header">
			<!-- <view class="set" @click='bj'>
				编辑
			</view> -->
			<view class="clear" @click='clears'>
				清空
			</view>
		</view>
		<!-- #endif -->
		<view class="list">
			<view class="mone" v-for="l in time">
				<view :style="los" class="h4">
					{{l}}
				</view>
				<view v-for='ls in data' v-if="ls.viewDate == l" class="checked" @click="che(0)" :class="{'act':lis[0]==1}">
					<view class="checkbox">
						<image src="../../static/img/3/3-75.png"></image>
					</view>
					<view :style="los" class="li">
						<view class="imgbox">
							<image :src="ls.defaultAlbum" mode="widthFix"></image>
							<!-- <view class="node">
								已售罄
							</view> -->
						</view>
						<view class="text">
							<view class="h1">
								{{ls.cName}}
							</view>
							<view class="p">
								<text>￥{{ls.fSalePrice}}</text> 比原价便宜了￥{{ls.firstViewPrice-ls.fSalePrice}}元
							</view>
							<view class="nav">
								<navigator :url="'/pages/user/xiang?productClass='+ls.productClass+'&pid='+ls.pid">找相似</navigator>
								<navigator :url="'/pages/detail/index?id='+ls.pid" class="add">
									<image src="../../static/img/3/3-84.png" mode="widthFix"></image>
								</navigator>
							</view>
						</view>
					</view>



				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				los: 'left:0rpx',
				lis: [1, 1, 1],
				data: [],
				time: [],
				ids: []
			}
		},
		onLoad() {
			this.getData()

		},
		methods: {
			bj() {
				var los = this.los;

				if (los == 'left:60rpx') {
					this.los = 'left:0rpx'
				} else {
					this.los = 'left:60rpx'
				}
			},
			getData() {
				var that = this;
				var ids = []
				that.$Request.post(
					that.$api.httpApi.user.footprint + '&token=' + that.$SysCache.get('token') + '&pagesize=20&pageindex=1',
				).then(res => {
					if (res.code == 200) {
						that.time = res.data.viewDateList
						that.data = res.data.pager.data;
						for (var i = 0; i < res.data.pager.data.length; i++) {
							ids.push(res.data.pager.data[i].id)
						}
						that.ids = ids
					}
				});
			},
			clears() {
				var that = this;
				that.$Request.post(
					that.$api.httpApi.user.deletes + '?token=' + that.$SysCache.get('token'), {
						ids: that.ids
					}
				).then(res => {
					if (res.code == 200) {
						that.getData()
					}
				});
			},
			che(index) {
				var lis = this.lis;
				if (lis[index] == 1) {
					this.$set(lis, index, 0)
				} else {
					this.$set(lis, index, 1)
				}
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.text == '清空') {
				console.log(123456)
				var that = this;
				that.$Request.post(
					that.$api.httpApi.user.deletes + '?token=' + that.$SysCache.get('token'), {
						ids: that.ids
					}
				).then(res => {
					if (res.code == 200) {
						that.getData()
					}
				});
			}
		}


	}
</script>

<style scoped>
	.checked {
		position: relative;
	}

	.checked .checkbox {
		width: 37rpx;
		height: 37rpx;
		/* border: 2rpx solid #999; */
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		border-radius: 50%;
	}

	.checked .checkbox image {
		width: 35rpx;
		height: 35rpx;
		display: none;
	}

	.act .checkbox image {
		display: block;
	}

	.header {
		height: 101rpx;
		background: #000000;
		position: relative;
		line-height: 101rpx;
		text-align: right;
	}

	.header view {
		display: inline-block;
		font-size: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-right: 30rpx;
	}

	.mone .h4 {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 78rpx;
		line-height: 78rpx;
		position: relative;
	}

	.text {
		width: calc(100% - 235rpx - 1px);
		display: inline-block;
		vertical-align: middle;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(77, 77, 77, 1);
		padding: 25rpx;
		padding-left: 35rpx;
	}

	.p {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(240, 64, 111, 1);
		margin-top: 18rpx;
	}

	.p text {
		font-size: 30rpx;
		margin-right: 12rpx;
	}

	.nav {
		margin-top: 18rpx;
	}

	.nav navigator {
		display: inline-block;
		width: 97rpx;
		height: 45rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);
		text-align: center;
		font-size: 22rpx;
		line-height: 45rpx;
		border-radius: 23rpx;
	}

	.nav .add {
		display: inline-block;
		float: right;
		width: 33rpx;
		margin-top: 10rpx;
		border: none;
	}

	.nav .add image {
		display: block;
		width: 100%;

	}

	.list {
		width: 90%;
		margin: auto;
		padding-top: 30rpx;
		position: relative;

	}

	.list .li {
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
	}

	.imgbox {
		width: 235rpx;
		height: 235rpx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		line-height: 235rpx;
		border-right: 1px solid #EFEFEF;
		position: relative;
	}

	.imgbox .node {
		position: absolute;
		width: 100%;
		height: 48rpx;
		background: rgba(0, 0, 0, 0.77);
		left: 0;
		bottom: 0;
		text-align: center;
		line-height: 48rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.imgbox image {
		max-width: 164rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
	}

	.top navigator {
		flex: 1;
		margin-left: 90rpx;
		margin-right: 90rpx;
	}

	.active {
		border-bottom: 3rpx solid #F0406F;
		color: #F0406F;
	}

	uni-page-body {
		height: 100%;
	}

	.mord {
		min-height: 100%;
		background: #EEEEEE;
	}
</style>
